<template>
	<view :class="[BackGround]" :style="[{'font-weight':Style,'font-family':Font,minHeight:height + 'px',height: 100 + '%'}]">
		<cu-custom bgColor="bg-gradual-blue" isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">修理管理详情</view>
		</cu-custom>
		<view class='tui-notice-board'>
			<view class="tui-icon-bg">
				<text class="cuIcon-notification" style="color: rgb(245, 79, 70);"></text>
			</view>
			<view class="tui-scorll-view">
				<view class="tui-notice">红色为默认值，绿色为用户需要输入值！</view>
			</view>
		</view>
		<view :class="['margin-xs radius shadow shadow-lg bg-white' ,BackGroundBox]" v-if="isShow">
			<form @submit="formSubmit" @reset="formReset">
				<view :style="{marginBottom:100 + 'rpx',marginTop:70 + 'rpx'}">
					<view class="cu-form-group">
						<view class="title-default">修理位置</view>
						<input type="text" name="LREPPOSITION" disabled :value="item.LREPPOSITION" />
					</view>
					<view class="cu-form-group">
						<view class="title">修理位置</view>
						<input type="text" name="LLREPPOSITION" :value="item.LLREPPOSITION" placeholder="请输入" />
					</view>
					<view class="cu-form-group">
						<view class="title-default">修理方式</view>
						<input type="text" name="LREPTYPPE" disabled :value="item.LREPTYPPE" />
					</view>
					<view class="cu-form-group">
						<view class="title">修理方式</view>
						<input type="text" name="LLREPTYPPE" :value="item.LLREPTYPPE" placeholder="请输入" />
					</view>
					<!-- <view class="cu-form-group">
						<view class="title-default">油脂类型</view>
						<input type="text" name="LREPPRDTYPE" disabled :value="item.LREPPRDTYPE" />
					</view>
					<view class="cu-form-group">
						<view class="title">油脂类型</view>
						<input type="text" name="LLREPPRDTYPE" :value="item.LLREPPRDTYPE" placeholder="请输入" />
					</view> -->
					<view class="cu-form-group">
						<view class="title-default">供应商</view>
						<input type="text" name="LPTNCODE" disabled :value="item.LPTNCODE" />
					</view>

					<view class="cu-form-group">
						<view class="title">供应商</view>
						<input type="text" name="LLPTNCODE" :value="item.LLPTNCODE" placeholder="请输入" />
					</view>
					<!-- <view class="cu-form-group">
						<view class="title-default">周期(天)</view>
						<input type="number" name="LREPCIRCLE" disabled :value="item.LREPCIRCLE" />
					</view>
					<view class="cu-form-group">
						<view class="title">周期(天)</view>
						<input type="number" name="LLREPCIRCLE" :value="item.LLREPCIRCLE" placeholder="请输入" />
					</view>
					<view class="cu-form-group">
						<view class="title-default">油量(kg)</view>
						<input type="number" disabled name="LREPWEIGHT" :value="item.LREPWEIGHT" />
					</view>
					<view class="cu-form-group">
						<view class="title">油量单位</view>
						<picker @change="PickerChange1" name="LUNIT" :value="index1" :range="picker1" range-key="LNAME">
							<view class="picker">
								{{picker1[index1].LNAME}}
							</view>
						</picker>
					</view>
					<view class="cu-form-group">
						<view class="title">油量(kg)</view>
						<input type="number" name="LLREPWEIGHT" :value="item.LLREPWEIGHT" placeholder="请输入" />
					</view> -->
					<view class="cu-form-group">
						<view class="title">明细备注</view>
						<textarea maxlength="-1" name="LLTSREMARK" :value="item.LLTSREMARK" placeholder="请输入明细备注"></textarea>
					</view>
					<view class="cu-form-group">
						<view class="title">上传图片</view>
						<view class="grid col-4 grid-square flex-sub" style="justify-content:flex-end">
							<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
								<image :src="imgList[index]" mode="aspectFill"></image>
								<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
									<text class='cuIcon-close'></text>
								</view>
							</view>
							<view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
								<text class='cuIcon-cameraadd'></text>
							</view>
						</view>
					</view>
				</view>
				<button-father :Position="'tb-fa-fixed'">
					<button class="cu-btn bg-gradual-blue lg shadow tb-flex cu-btn-new" form-type="submit">确认</button>
				</button-father>
			</form>
		</view>
	</view>
</template>

<script>
	import ButtonFather from '@/colorui/components/ButtonFather.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		postupdate
	} from "@/service/updateList.js"
	export default {
		data() {
			return {
				isShow: true,
				height: this.screenHeight,
				item: '',
				index: '',
				imgList:[],
				picker1: [{
						"LNAME": "KG"
					},
					{
						"LNAME": "只"
					},
					{
						"LNAME": "包"
					},
					{
						"LNAME": "袋"
					},
					{
						"LNAME": "瓶"
					},
				],
				index1: 0,
				imagename: '',
				imagename2:'',
			}
		},
		computed: {
			...mapGetters(['Style', 'Font', 'BackGround', 'BackGroundBox']),
			ip() {
				let ip = uni.getStorageSync('IP') || 'http://47.101.156.202'
				let port = uni.getStorageSync('PORT') || '8443'
				return ip + ':' + port
			},
		},
		components: {
			ButtonFather
		},
		onLoad(options) {
			this.item = JSON.parse(options.item)
			this.picker1.forEach((value,index) => {
				if(value.LNAME == this.item.LUNIT) {
					this.index1 = index
				}
			})
			this.imagename = this.ip + '/image/UserImage/FaceImage/' + this.item.LPHOTO
			this.imagename2 = this.item.LPHOTO
			this.imgList.push(this.imagename)
			this.index = options.index
		},
		methods: {
			...mapMutations(['lubricsetlist', 'lubricdellist']),
			PickerChange1(e) {
				this.index1 = e.detail.value
			},
			// 跳转详情
			jumpdetail(info) {
				// uni.navigateTo({
				// 	url: `./periodadddetail/periodadddetail?name=${info}`
				// })
			},
			formSubmit(e) {
				//定义表单规则
				var rule = [{
					name: "LLREPPOSITION",
					checkType: "notnull",
					errorMsg: "请输入修理位置"
				}, {
					name: "LLREPTYPPE",
					checkType: "notnull",
					errorMsg: "请输入修理方式"
				}, {
					name: "LLPTNCODE",
					checkType: "notnull",
					errorMsg: "请输入供应商"
				}];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = this.$graceChecker.check(formData, rule);
				if (!checkRes) {
					uni.showToast({
						title: this.$graceChecker.error,
						icon: "none"
					});
				} else {
					e.detail.value['LSEQ'] = this.item['LSEQ']
					e.detail.value['LID'] = this.item['LID']
					// e.detail.value['LUNIT'] = this.picker1[this.index1].LNAME
					e.detail.value['LPHOTO'] = this.imagename2
					this.item = Object.assign(this.item,e.detail.value)
					postupdate(955601, global.userinfo.lusercode, {
						"dts":[e.detail.value]
					})
					this.lubricdellist(this.index)
					this.lubricsetlist(this.item)
					console.log(e.detail.value);
					uni.navigateBack({
						delta: 1
					})
					uni.showToast({
						title: '添加成功',
						icon: 'success',
						duration: 3000
					});
				}
			},
			// ---------------------------上传图片===================================
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						this.imgList = res.tempFilePaths
						uni.uploadFile({
							// url:'http://192.168.31.29:8080/upload',
							url: uni.getStorageSync('IP') + ':' + uni.getStorageSync('PORT') + '/api/upload',
							filePath: this.imgList[0],
							header: {
								'token': uni.getStorageSync('token')
							},
							name: 'file',
							success: (res) => {
								console.log(JSON.parse(res.data));
								let myres = JSON.parse(res.data)
								console.log(myres.data);
								this.imagename = myres.data
								this.imagename2 = myres.data
							}
						})
					}
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这张图片吗？',
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			// -----------------------------------------------------------
		}
	}
</script>

<style>
	page {
		background-color: whitesmoke;
	}

	.tui-notice-board {
		position: fixed;
		z-index: 9;
		width: 100%;
		padding-right: 30rpx;
		font-size: 28rpx;
		height: 60rpx;
		background: #fff8d5;
		display: flex;
		align-items: center;
	}

	.tui-icon-bg {
		background: #fff8d5;
		padding-left: 30rpx;
		position: relative;
		z-index: 10;
		margin-right: 12rpx;
	}

	.tui-scorll-view {
		flex: 1;
		line-height: 1;
		white-space: nowrap;
		overflow: hidden;
		color: #f54f46;
	}
</style>
